<template>
  	<div  >
      <ul class="time">
     
        <li class="hour">
          <div v-if='doubletenth' style="color:#FB2421;font-size:16px;" class="reckon">已结束</div>
          <div v-if='!doubletenth'    class="reckon">
           距结束  <span v-if="reckon.day!='00'">{{reckon.day}}天</span> {{reckon.hours}}:{{reckon.branch}}:{{reckon.sec}}
           
        
          </div>
      
        </li>
  
      </ul>

         
    </div>
</template>

<script>



export default {

  data(){
      return{
        doubletenth:false,
        reckon:{
          hours:'00',
          branch:'00',
          sec:'00',
          day:'00',
          co:':',
         
        },
    //  time:1541865600000
      }
  },
   props:['time'],
   onShow(){
     
   this.sTime();
    
    
 
  },
  methods:{

     
 
    sTime(){
      // console.log(1)
     let   unixTimestamp = new Date( parseInt(this.time ))
      let   commonTime = unixTimestamp.toLocaleString()
    // console.log(unixTimestamp)
            //获取当前时间
            var date = new Date();
            var now = date.getTime();
            //设置截止时间
            var endDate = new Date(unixTimestamp);
            var end = endDate.getTime();
            //时间差
            var leftTime = end-now;
            //定义变量 d,h,m,s保存倒计时的时间
            var d,h,m,s;
            if (leftTime>0) {
                d = Math.floor(leftTime/1000/60/60/24);
                h = Math.floor(leftTime/1000/60/60%24);
                m = Math.floor(leftTime/1000/60%60);
                s = Math.floor(leftTime/1000%60);                   
            }else{
                this.doubletenth=true;
                this.$emit('timeclose')
            }
            //将倒计时赋值到div中
            
            // console.log(d+'天'+h+'时'+m+'分'+s)
            if(d<10){
             this.reckon.day ='0'+d;
             }else{
             this.reckon.day = d;
            }
             if(h<10){
              this.reckon.hours = '0'+h;
            }else{
              this.reckon.hours = h;
            }
            
            if(m<10){
              this.reckon.branch ='0'+ m;
            }else{
              this.reckon.branch = m;
            }
             if(s<10){
              this.reckon.sec ='0'+ s;
            }else{
              this.reckon.sec = s;
            }

          
            //递归每秒调用countTime方法，显示动态时间效果
            setTimeout(this.sTime,1000);

    }
  },

}

</script>

<style lang="scss" scoped>
   

  .time{
   
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    .line{
      width: 39px;
      height: 1px;
      background: #000;
    }
    .hour{
    
     line-height: 44px;
     font-size: 12px;
     color: #fff;
      .word{
        color: #000;
        font-weight: bold;
      }
      .reckon{
        margin: 0 15px;
        display: flex;
        justify-content:space-around;
        align-items: center;
        font-size: 13px;
        color: #fff;
        .spot{
          margin: 0 5px;
          color: #fff;
          font-weight: bold;
           font-size: 12px;
        }
        .jiTime{
      
          width: 16px;
          line-height: 16px;
          border-radius: 4px;
          text-align: center;
          background: #fff;
          color: #fff;
          text-align: center;
          color: #FF4602;
          font-size: 12px;
          font-weight: bold;

        }
      }
    }
  }






</style>
